<!-- 纵向布局作为基础布局 -->
<script setup lang="ts">
import { SIDE_BAR_WIDTH } from '@/config/index';
import { useCollapseToggle } from '@/hooks/useCollapseToggle';
import { useSafeArea } from '@/hooks/useSafeArea';
import { useScreenStore } from '@/hooks/useScreen';
import { useWindowWidthObserver } from '@/hooks/useWindowWidthObserver';
import Aside from '@/layouts/components/Aside/index.vue';
import Header from '@/layouts/components/Header/index.vue';
import Main from '@/layouts/components/Main/index.vue';
import { useDesignStore } from '@/stores';

const designStore = useDesignStore();
const { isMobile } = useScreenStore();
const { changeCollapse } = useCollapseToggle();

const isCollapse = computed(() => designStore.isCollapse);

// 遮罩层显示状态
const showMask = ref(false);

// 监听侧边栏折叠状态变化，控制遮罩层显示
watch(() => designStore.isCollapse, (newValue) => {
  if (isMobile.value) {
    // 手机版下，当侧边栏展开时显示遮罩层
    showMask.value = !newValue;
  }
});

// 点击遮罩层触发折叠
function handleMaskClick() {
  if (isMobile.value && !designStore.isCollapse) {
    changeCollapse();
    // 每次切换折叠状态，重置安全区状态
    designStore.isSafeAreaHover = false;
    // 重置首次激活悬停状态
    designStore.hasActivatedHover = false;
    if (!designStore.isCollapse) {
      document.documentElement.style.setProperty(
        `--sidebar-left-container-default-width`,
        `${SIDE_BAR_WIDTH}px`,
      );
    }
    else {
      document.documentElement.style.setProperty(`--sidebar-left-container-default-width`, ``);
    }
  }
}

/* 是否移入了安全区 */
useSafeArea({
  direction: 'left',
  size: 50,
  onChange(isInSafeArea) {
    // 设置悬停为 true
    designStore.isSafeAreaHover = isInSafeArea;
  },
  enabled: isCollapse, // 折叠才开启监听
});

/** 监听窗口大小变化，折叠侧边栏 */
useWindowWidthObserver();
</script>

<template>
  <div class="layout-wrapper">
    <!-- 手机版遮罩层 -->
    <div v-if="isMobile && showMask" class="mobile-sidebar-mask" @click="handleMaskClick" />

    <el-container class="layout-container">
      <el-header class="layout-header z-0">
        <Header />
      </el-header>
      <el-container class="layout-container-main">
        <Aside />
        <el-main class="layout-main">
          <!-- 路由页面 -->
          <Main />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.layout-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
}

.layout-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .layout-header {
    padding: 0;
  }
  .layout-main {
    height: 100%;
    padding: 0;
  }
  .layout-container-main {
    margin-left: var(--sidebar-left-container-default-width, 0);
    transition: margin-left 0.3s ease;
  }
}

/** 去除菜单右侧边框 */
.el-menu {
  border-right: none;
}
.layout-scrollbar {
  width: 100%;
}

// 手机版遮罩层样式
.mobile-sidebar-mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900; // 低于侧边栏但高于内容
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(1px);
  animation: mask-fade-in 0.3s ease;
}

@keyframes mask-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

// 手机版响应式优化
@media (max-width: 768px) {

  .el-header {
    --el-header-padding: 0 10px!important;
    --el-header-height: 40px!important;
  }
  .layout-container {
    .layout-container-main {
      // 手机版下侧边栏展开时，右侧内容区域需要绝对定位
      position: relative;

      .layout-main {
        // 手机版下确保内容区域不会被侧边栏挤压
        width: 100vw;
        position: relative;
        z-index: 1;
      }
    }

    // 当侧边栏展开时，右侧内容需要被覆盖
    &:has(.aside-container:not(.aside-container-collapse)) {
      .layout-container-main {
        .layout-main {
          // 侧边栏展开时，右侧内容被覆盖
          transform: translateX(var(--sidebar-default-width, 280px));
          transition: transform 0.3s ease;
        }
      }
    }
  }
}

// 手机版侧边栏样式优化
@media (max-width: 768px) {
  .aside-container {
    // 手机版下侧边栏使用绝对定位覆盖在内容上方
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 1000; // 侧边栏层级高于遮罩层
    height: 100vh;

    // 侧边栏展开时的动画
    &:not(.aside-container-collapse) {
      transform: translateX(0);
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }

    // 侧边栏折叠时的状态
    &.aside-container-collapse {
      transform: translateX(-100%);
    }
  }
}
</style>
